﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>ECharts</title>
    <!-- 引入 echarts.js -->   
 
  <style>
    html,body { height:100%; width:100%; margin:0; padding:0;align:left;valign:left;}
  </style>
</head>
<body bgcolor="#000000">

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
      <div id="main" style="width: 100%;height:100%;background-color:#000000;"></div>
   <!-- <div id="main" style="height:100%;width:100%;border:0px;background-color:#000000;"></div>-->
    <script src="./js/echarts.js"></script>
    <script type="text/javascript">      
       // var myChart = echarts.init(document.getElementById('main'));         
        var myChart;                
        //创建折线图
        function createYbChart(a,b,c){
        	  
        	option = {
        		    tooltip : {
        		        formatter: "{a} <br/>{b} : {c}%"
        		    },
        		    toolbox: {
        		        show : true,
        		        feature : {
        		        //    mark : {show: true},
        		          //  restore : {show: true},
        		          //  saveAsImage : {show: true}
        		        }
        		    },
        		    series: [
                        {
                            name: '业务指标',
                            type: 'gauge',
                            center: ['50%', '50%'],
                            // startAngle: 90,
                            // endAngle: -140,

                            min: 0,
                            max: c,
                            axisLine: {            // 坐标轴线
                                show: true,        // 默认显示，属性show控制显示与否
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: [[0.2, '#ff4500'], [0.5, 'orange'], [0.8, 'skyblue'], [1, 'lightgreen']],
                                    width: 30
                                }
                            },
                            pointer: {
                                length: '80%',
                                width: 8,
                                color: 'auto'
                            },
                            title: {
                                show: true,
                                offsetCenter: ['-0%', '105%'],       // x, y，单位px
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    color: '#fff',
                                    fontSize: 38
                                }
                            },
        		            axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                                show: true,
                                formatter: function (v) {
                                    switch (v + '') {
                                        case '0': return '0';
                                        case c / 10 + '': return c / 10 + '';
                                        case c * 2 / 10 + '': return c * 2 / 10 + '';
                                        case c * 3 / 10 + '': return c * 3 / 10 + '';
                                        case c * 4 / 10 + '': return c * 4 / 10 + '';
                                        case c * 5 / 10 + '': return c * 5 / 10 + '';
                                        case c * 6 / 10 + '': return c * 6 / 10 + '';
                                        case c * 7 / 10 + '': return c * 7 / 10 + '';
                                        case c * 8 / 10 + '': return c * 8 / 10 + '';
                                        case c * 9 / 10 + '': return c * 9 / 10 + '';
                                        case c * 10 / 10 + '': return c * 10 / 10 + '';
                                        default: return '';
                                    }
                                },
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    color: '#fff',
                                    fontSize: 13
                                }
                            },
        		            detail: {
                                show: true,
                                backgroundColor: 'rgba(0,0,0,0)',
                                borderWidth: 0,
                                borderColor: '#ccc',
                                width: 100,
                                height: 40,
                                offsetCenter: ['-0%', '88%'],       // x, y，单位px
                                formatter: '{value}',
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    color: 'auto',
                                    fontSize: 38
                                }
                            },         
        		            data: [{
                                value: a, name: b//'工作时间'
                            }]
        		        }
        		    ]
        		};
         }
        
        function createChart(a,b,c){   
        	   myChart = echarts.init(document.getElementById('main'));
                createYbChart(a,b,c);                                
                //使用指定的配置项和数据显示图表。
               myChart.setOption(option);
               window.onresize = myChart.resize;
        }                                                 
    </script>
</body>
</html>